<template>
	<view>
		<view class="message-title">
			<text>基础信息</text>
		</view>
		<view class="container">

			<view class="left-message">
				<view class="lf">
					<text>照片</text>
				</view>
				<view class="lf">
					<text>姓名</text>
				</view>
				<view class="lf">
					<text>ID</text>
				</view>
				<view class="lf">
					<text>性别</text>
				</view>
				<view class="lf">
					<text>年龄</text>
				</view>
				<view class="lf">
					<text>爱好特长</text>
				</view>
				<view class="lf">
					<text>健康状况</text>
				</view>
				<view class="lf">
					<text>联系方式</text>
				</view>
				<view class="lf">
					<text>通讯地址</text>
				</view>
			</view>
			<view class="right-message">
				<view class="rt">
					<image src="../../../static/img/31.png" mode=""></image>
				</view>
				<view class="rt">
					<text>胡浩森</text>
				</view>
				<view class="rt">
					<text>SB001</text>
				</view>
				<view class="rt">
					<text>男</text>
				</view>
				<view class="rt">
					<text>23</text>
				</view>
				<view class="rt">
					<text>玩坦克</text>
				</view>
				<view class="rt">
					<text>良好</text>
				</view>
				<view class="rt">
					<text>01010101</text>
				</view>
				<view class="rt">
					<text>成都</text>
				</view>
			</view>

		</view>
		<view class="bottom-message">
			<text class="tet">亲属信息</text>
			<view class="bottom-m">
				<text>胡浩森</text>
				<text>儿子</text>
				<text>1523846</text>
			</view>
			<view class="bottom-m">
				<text>胡浩森</text>
				<text>儿子</text>
				<text>1523846</text>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="less" scoped>
	.container {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.left-message {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 30%;	
		background-color: rgb(250,250,250);
		margin-left: 10px;
	}

	.right-message {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 70%;
		margin-left: 10px;
	}

	.bottom-message {
		display: flex;
		flex-direction: column;
		justify-content: center;

	}

	.bottom-m {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
        margin-bottom: 20px;
	}

	.tet {
		font-size: 18px;
		font-weight: 700;
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.message-title {
		display: flex;
		flex-direction: column;
		font-size: 18px;
		font-weight: 700;
		width: 100%;
		height: 40px;
		line-height: 40px;
	}

	.lf {
		width: 100%;
		height: 60px;
		text-align: center;
		line-height: 60px;
	}
	.rt{
		width: 100%;
		height: 60px;
		// text-align: center;
		line-height: 60px;
		& image{
			
				width: 25%;
				height: 100%;
			
		}
	}

</style>
